<template>
<!--采购付款界面-->
  <div>
    <div class="pay-buy-order-box">
      <el-form :model="accountBuy" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
        <el-form-item label="支付采购单号:" required>
            <el-tag style="margin-right: 20px"  type="danger" effect="dark" v-for="(item,index) in accountBuy.buyOrderIdList" :key="index">{{item.buyOrderId}}</el-tag>
        </el-form-item>
        <div style="display: flex">
          <el-form-item style="flex: 1" label="财务类型" required >
            <el-button-group>
              <el-button  type="success" >支出></el-button>
              <el-button  type="success">采购支出></el-button>
              <el-button  type="success" >采购支出</el-button>
            </el-button-group>
          </el-form-item>
          <el-form-item style="flex: 1" label="收款方:" required>
              <span style="font-size: 17px;font-weight: bold">{{accountBuy.supplierName}}</span>
          </el-form-item>
        </div>
        <div style="display: flex">
          <el-form-item style="flex: 1" label="采购单总价" required>
            <span style="font-size: 17px;font-weight: bold;color: #ff3526">{{accountBuy.allBuyOrderMoney}}</span>
            <span  style="font-size: 17px;font-weight: bold;color: #ff3526;font-style: oblique">元</span>
          </el-form-item>
          <el-form-item style="flex: 1" label="已付金额" required>
            <span style="font-size: 17px;font-weight: bold;">{{accountBuy.nowGiveMoney}}</span>
            <span  style="font-size: 17px;font-weight: bold ;font-style: oblique">元</span>
          </el-form-item>
        </div>
        <div style="display: flex">
          <el-form-item style="flex: 1" label="应付款" required>
            <span style="font-size: 17px;font-weight: bold;color: #ff3526">{{accountBuy.shouldGiveMoney}}</span>
            <span  style="font-size: 17px;font-weight: bold;color: #ff3526;font-style: oblique">元</span>
          </el-form-item>
          <el-form-item style="flex: 1" label="实付金额" prop="payMoney" >
            <el-input v-model="accountBuy.payMoney" placeholder="元" onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" clearable style="width: 160px"></el-input>
            <span style="font-weight: bold;font-size: 16px">&nbsp;元&nbsp;</span>
            <el-checkbox v-model="accountBuy.isOver">结算完毕(抹去零头)</el-checkbox>
          </el-form-item>
        </div>
        <div style="display: flex">
          <el-form-item style="flex: 1" label="付款时间" prop="payTime">
            <el-date-picker
              v-model="accountBuy.payTime"
              align="right"
              type="date"
              placeholder="选择日期"
              :picker-options="pickerOptions">
            </el-date-picker>
          </el-form-item>
          <el-form-item style="flex: 1" label="经办人" required>
            <el-tag>{{employeeName}}</el-tag>
          </el-form-item>
        </div>

        <el-form-item style="flex: 1" label="付款方式" required >
          <el-radio-group v-model="accountBuy.payOrTakeWay" >
            <el-radio v-for="(item,index) in payOrTakeList" :key='index' :label="item.payTakeId" border >{{ item.payTakeName }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item style="flex: 1" label="备注" >
          <el-input type="textarea" style="width: 400px" :rows="3"
                    maxlength="50"
                    show-word-limit
                    v-model="accountBuy.remark"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button :loading="this.loading" type="primary" @click="submitForm('ruleForm')"><span style="font-weight: bold;font-size: 16px">确认付款</span></el-button>
          <el-button :loading="this.loading" type="danger" @click="resetForm('ruleForm')"><span style="font-weight: bold;font-size: 16px">重置账务</span></el-button>
        </el-form-item>
      </el-form>

    </div>
  </div>
</template>

<script>
import {get, post} from "../../utils/request";

export default {
  name: "PayBuyOrder",
  props:['multipleSelection'],
  data(){
    return{
      loading:false,
      accountBuy:{

        buyOrderIdList:[],
        remark:null,
        supplierId:null,
        allBuyOrderMoney:0,
        nowGiveMoney:0,
        shouldGiveMoney:0,
        payMoney:null,
        isOver:false,
        payTime:null,
        payOrTakeWay:null,
        supplierName:null,


      },
      payOrTakeList:[],
      employeeName:null,
      rules: {
        payMoney: [
          { required: true, message: '请输入付款金额', trigger: 'blur' },
        ],

        payTime: [
          { type: 'date', required: true, message: '请选择付款日期', trigger: 'change' }
        ]
      },
      pickerOptions: {

        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },

    }
  },
  created() {
    this.accountBuy.payTime=new Date()
    get("/api/v1/token/showRealName").then(resp=>{
      this.employeeName=resp.data
    })
    get('/api/v1/paytake/find/all').then(resp=>{
      this.payOrTakeList=resp.data
      this.accountBuy.payOrTakeWay=this.payOrTakeList[0].payTakeId

    })
    },
  mounted() {
     this.accountBuy= {
      buyOrderIdList:[],
        remark:null,
        supplierId:null,
        allBuyOrderMoney:0,
        nowGiveMoney:0,
        shouldGiveMoney:0,
        payMoney:null,
        isOver:false,
        payTime:null,
        payOrTakeWay:null,
       supplierName:null,


     }
    this.accountBuy.payTime=new Date()
    this.fleshNewMsg()
    },
  methods:{
    fleshNewMsg(){
      this.accountBuy.supplierId=this.multipleSelection[0].suppliers.supplierId
      this.accountBuy.supplierName=this.multipleSelection[0].suppliers.supplierName
      for (let i = 0; i <this.multipleSelection.length ; i++) {
        this.accountBuy.buyOrderIdList.push({buyOrderId:this.multipleSelection[i].buyOrderId,storageDate:this.multipleSelection[i].storageDate})
        this.accountBuy.allBuyOrderMoney+=this.multipleSelection[i].sumMoney;
        this.accountBuy.nowGiveMoney+=this.multipleSelection[i].given
      }
      this.accountBuy.shouldGiveMoney=Math.round((this.accountBuy.allBuyOrderMoney-this.accountBuy.nowGiveMoney)*100)/100
    },
    submitForm(formName) {
      this.loading=true
      if ((this.accountBuy.shouldGiveMoney-this.accountBuy.payMoney)<0){
        this.$message.error("支付的费用已经超出所需,请修改实付金额")
        this.loading=false
        return
      }
      if (this.accountBuy.payMoney==="0"){
        this.$message.error("实付金额不能为0元")
        this.loading=false
        return
      }

      this.$refs[formName].validate((valid) => {
        if (valid) {
            post('/api/v1/post/account/special/buy',this.accountBuy).then(resp=>{
                if (resp.data.code===1){
                  this.$message({
                    message: resp.data.msg,
                    type: 'success'
                  });
                  this.loading=false
                  this.$emit('aNewThing')
                   // this.$router.push({name:'FindBuyRecording'})
                }else {
                  this.$message.error(resp.data.msg)
                  this.loading=false
                }
            }).catch(resp=>{
               this.$message.error("系统出bug了,快找bug")
              this.loading=false
            })
        } else {
          this.loading=false
          return false;
        }
      });
    },
    resetForm(formName) {
      this.accountBuy.remark=null
      this.accountBuy.isOver=false
        this.accountBuy.payOrTakeWay=this.payOrTakeList[0].payTakeId
      this.$refs[formName].resetFields();
    }
  },
  watch:{
    'multipleSelection'(){
      this.accountBuy=  {
        buyOrderIdList:[],
        remark:null,
        supplierId:null,
        allBuyOrderMoney:0,
        nowGiveMoney:0,
        shouldGiveMoney:0,
        payMoney:null,
        isOver:false,
        payTime:null,
        payOrTakeWay:null,
        supplierName:null,
      }
      this.accountBuy.payTime=new Date()
      if (this.multipleSelection.length===0){
        get('/api/v1/paytake/find/all').then(resp=>{
          this.payOrTakeList=resp.data
          this.accountBuy.payOrTakeWay=this.payOrTakeList[0].payTakeId
        })
      }else {
        this.accountBuy.payOrTakeWay=this.payOrTakeList[0].payTakeId
      }

      if (this.multipleSelection.length!==0){
        this.fleshNewMsg()
      }

    }
  },
  beforeDestroy() {

  }

}
</script>

<style scoped>
.pay-buy-order-box{
  min-height: 400px;
}
</style>
